<template>
  <div>
    <input type="text" v-model="phone" id="search-input">
    <el-button type="primary" @click="search" size="small">搜索</el-button>
    <el-table :data="userList" style="width: 100%">
      <el-table-column label="头像" width="100">
        <template #default="scope">
          <img :src="scope.row.avatar" alt="头像" style="width:40px;height:40px;border-radius:50%;" />
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="120"/>
      <el-table-column prop="phone" label="手机号" width="140"/>
      <el-table-column prop="pickupPoint.name" label="自提点" width="120"/>
      <el-table-column prop="name" label="真实姓名" width="120"/>
      <el-table-column label="操作" width="300">
        <template #default="scope">
          <el-button type="success" size="small" @click="sendCoupon(scope.row)">发放优惠券</el-button>
          <el-button type="primary" size="small" @click="deleteUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 用户优惠券发放对话框 -->
    <el-dialog v-model="couponDialogVisible" title="发放优惠券给用户" width="500px">
  <el-form>
    <el-form-item label="优惠券名称" label-width="100px">
      <el-input v-model="couponForm.name" placeholder="请输入优惠券名称"></el-input>
    </el-form-item>
    <el-form-item label="商品ID" label-width="100px">
      <el-input v-model="couponForm.product_id" placeholder="请输入商品ID"></el-input>
    </el-form-item>
    <el-form-item label="折扣" label-width="100px">
      <el-input-number v-model="couponForm.discount" :min="0.1" :max="1" :step="0.01" controls-position="right" placeholder="0.1-1"></el-input-number>
    </el-form-item>
    <el-form-item label="使用门槛" label-width="100px">
      <el-input v-model.number="couponForm.discount_condition" placeholder="满多少可用"></el-input>
    </el-form-item>
    <el-form-item label="开始时间" label-width="100px">
      <el-date-picker v-model="couponForm.start_time" type="datetime" placeholder="选择开始时间"></el-date-picker>
    </el-form-item>
    <el-form-item label="截止日期" label-width="100px">
      <el-date-picker v-model="couponForm.end_time" type="datetime" placeholder="选择截止日期"></el-date-picker>
    </el-form-item>
  </el-form>
  <template #footer>
    <el-button @click="couponDialogVisible = false">取消</el-button>
    <el-button type="primary" @click="submitUserCoupon">确定发放</el-button>
  </template>
</el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'

const userList = ref([])
const phone = ref()
const fetchUsers = () => {
  axios.get('/user/list').then(res => {
    userList.value = res.data
  })
}

onMounted(fetchUsers)
function search() {
  axios.get('/user/list', {
    params: {
      phone: phone.value
    }
  }).then(res => {
    userList.value = res.data
  })
}

const couponDialogVisible = ref(false)
const couponForm = ref({
  name: '',                // 优惠券名称
  product_id: '',          // 商品ID
  discount: 1,             // 折扣
  discount_condition: 0,   // 使用门槛
  start_time: '',          // 开始时间
  end_time: ''   
})
const currentUser = ref(null)

const sendCoupon = (user) => {
  currentUser.value = user
  couponForm.value = {
    name: '',
    product_id: '',
    discount: 1,
    discount_condition: 0,
    start_time: '',
    end_time: ''
  }
  couponDialogVisible.value = true
}

const submitUserCoupon = () => {
  const payload = {
    user_id: currentUser.value.id,
    name: couponForm.value.name,
    product_id: couponForm.value.product_id,
    discount: couponForm.value.discount,
    discount_condition: couponForm.value.discount_condition,
    start_time: couponForm.value.start_time,
    end_time: couponForm.value.end_time,
    category_id: couponForm.value.product_id ? 2 : 1 // 根据商品ID判断category_id
  }
  axios.post('/user_coupon/release', payload).then(res => {
    ElMessage.success('优惠券发放成功')
    couponDialogVisible.value = false
  }).catch(error => {
    console.error(error)
    ElMessage.error('优惠券发放失败')
  })
}

const deleteUser = (user) => {
  ElMessageBox.confirm(`确定要删除用户 ${user.username} 吗？`, '警告', {
    type: 'error'
  }).then(() => {
    axios.post('/user/delete?id='+user.id).then(() => {
      ElMessage.success('已删除')
      fetchUsers()
    })
  })
}
</script>
<style scoped>
img {
  border: 1px solid #eee;
}
</style>